ํ๋ก ํธ์๋ ๋น๋ ์์คํ ์ ์ฆ๋ถ ์ปดํ์ผ์ ํ์ํ์ธ์. ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๊ฐ ์ด๋ป๊ฒ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ๊ทน์ ์ผ๋ก ๊ฐ์ํํ์ฌ ๋ ๋น ๋ฅธ ํผ๋๋ฐฑ๊ณผ ์์ฐ์ฑ ํฅ์์ ๊ฐ์ ธ์ค๋์ง ์์๋ณด์ธ์.
ํ๋ก ํธ์๋ ๋น๋ ์์คํ ์ฆ๋ถ ์ปดํ์ผ: ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋
ํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ๋น๋ ์์คํ ์ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ง, CSS ์ปดํ์ผ, ์์ ์ต์ ํ์ ๊ฐ์ ์์ ์ ์๋ํํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ณต์กํ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ๊ด๋ฆฌํ๋ ๋์ ์ฝ๋ ์์ฑ์ ์ง์คํ ์ ์๋๋ก ํด์ค๋๋ค. ํ์ง๋ง ํ๋ก์ ํธ์ ๊ท๋ชจ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํจ์ ๋ฐ๋ผ ๋น๋ ์๊ฐ์ ๊ฐ๋ฐ ์์ฐ์ฑ์ ์ํฅ์ ๋ฏธ์น๊ณ ํผ๋๋ฐฑ ๋ฃจํ๋ฅผ ๋ฆ์ถ๋ ์ค์ํ ๋ณ๋ชฉ ํ์์ด ๋ ์ ์์ต๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ ์ฆ๋ถ ์ปดํ์ผ, ํนํ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๊ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค.
์ฆ๋ถ ์ปดํ์ผ์ด๋ ๋ฌด์์ธ๊ฐ?
์ฆ๋ถ ์ปดํ์ผ์ ๋ง์ง๋ง ๋น๋ ์ดํ ๋ณ๊ฒฝ๋ ์ฝ๋๋ฒ ์ด์ค ๋ถ๋ถ๋ง ๋ค์ ์ปดํ์ผํ์ฌ ๋น๋ ์๊ฐ์ ์ค์ด๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ ๋น๋ ํ๋ก์ธ์ค ์ต์ ํ ๊ธฐ์ ์ ๋๋ค. ๋ณ๊ฒฝ์ด ์์ ๋๋ง๋ค ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒ์๋ถํฐ ๋ค์ ๋น๋ํ๋ ๋์ , ๋น๋ ์์คํ ์ ์์ ์ฌํญ์ ๋ถ์ํ๊ณ ์ํฅ์ ๋ฐ๋ ๋ชจ๋๊ณผ ๊ทธ ์์กด์ฑ๋ง ์ฒ๋ฆฌํฉ๋๋ค. ์ด๋ ๊ฐ ๋น๋์ ํ์ํ ์์ ๋์ ํฌ๊ฒ ์ค์ฌ ๋ ๋น ๋ฅธ ๋น๋ ์๊ฐ๊ณผ ํฅ์๋ ๊ฐ๋ฐ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง๋๋ค.
์ด๋ ๊ฒ ์๊ฐํด ๋ณด์ธ์: ์ฌ๋ฌ๋ถ์ด ์ฟ ํค๋ฅผ ๋๋์ผ๋ก ๊ตฝ๊ณ ์๋ค๊ณ ์์ํด ๋ณด์ธ์. ๋ง์ฝ ์ฌ๋ฃ ํ๋๋ง ๋ฐ๊พผ๋ค๋ฉด, ์ ์ฒด ๋ฐ์ฃฝ์ ๋ฒ๋ฆฌ๊ณ ์ฒ์๋ถํฐ ๋ค์ ์์ํ์ง๋ ์์ ๊ฒ์ ๋๋ค. ๋์ , ์๋ก์ด ์ฌ๋ฃ์ ๋ง์ถฐ ๋ ์ํผ๋ฅผ ์กฐ์ ํ๊ณ ํ์ํ ๋ถ๋ถ๋ง ์์ ํ ๊ฒ์ ๋๋ค. ์ฆ๋ถ ์ปดํ์ผ์ ๋ฐ๋ก ์ด ์๋ฆฌ๋ฅผ ์ฌ๋ฌ๋ถ์ ์ฝ๋๋ฒ ์ด์ค์ ์ ์ฉํฉ๋๋ค.
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋: ์ฆ๋ถ ์ปดํ์ผ์ ํต์ฌ ๊ตฌํ
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ์ฝ๋ ๋ณ๊ฒฝ์ ์ง์ ์ ์ผ๋ก ์ํฅ์ ๋ฐ๋ ๋ชจ๋๋ง ์๋ณํ๊ณ ์ฌ์ปดํ์ผํ๋ ๋ฐ ์ค์ ์ ๋ ํน์ ์ ํ์ ์ฆ๋ถ ์ปดํ์ผ์ ๋๋ค. ์ด๋ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ๊ฐ์ ๊ด๊ณ๋ฅผ ์ถ์ ํ๊ณ ํ์ผ์ด ์์ ๋ ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๋ค ๋ถ๋ถ์ ๋ค์ ๋น๋ํด์ผ ํ๋์ง ๊ฒฐ์ ํฉ๋๋ค. ์ด๋ ์ข ์ข ์์ค ํ์ผ์ ๋ณ๊ฒฝ์ ๊ฐ์งํ๊ณ ์ ํ์ ์ผ๋ก ๋น๋ ํ๋ก์ธ์ค๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ํ์ผ ์์คํ ๊ฐ์์(watcher)๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌ์ฑ๋ฉ๋๋ค.
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ์ด์
ํ๋ก ํธ์๋ ๋น๋ ์์คํ ์ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ฅผ ๊ตฌํํ๋ฉด ๋ช ๊ฐ์ง ์ค์ํ ์ด์ ์ด ์์ต๋๋ค:
1. ๋น๋ ์๊ฐ ๋จ์ถ
์ด๊ฒ์ด ๊ฐ์ฅ ์ฃผ๋ ์ด์ ์ ๋๋ค. ํ์ํ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํจ์ผ๋ก์จ, ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ํนํ ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ์์ ๋น๋ ์๊ฐ์ ๊ทน์ ์ผ๋ก ๋จ์ถ์ํต๋๋ค. ์ด ๋น ๋ฅธ ํผ๋๋ฐฑ ๋ฃจํ๋ ๊ฐ๋ฐ์๊ฐ ๋ ๋น ๋ฅด๊ฒ ๋ฐ๋ณตํ๊ณ , ๋ค๋ฅธ ํด๊ฒฐ์ฑ ์ ์คํํ๋ฉฐ, ๊ถ๊ทน์ ์ผ๋ก ์ํํธ์จ์ด๋ฅผ ๋ ๋นจ๋ฆฌ ์ ๊ณตํ ์ ์๊ฒ ํฉ๋๋ค.
2. ๊ฐ๋ฐ์ ์์ฐ์ฑ ํฅ์
๋น๋๊ฐ ์๋ฃ๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ ๊ฐ๋ฐ ๊ณผ์ ์์ ๋ต๋ตํ๊ณ ๋ฐฉํด๊ฐ ๋ ์ ์์ต๋๋ค. ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ์ด๋ฌํ ์ค๋จ์ ์ต์ํํ์ฌ ๊ฐ๋ฐ์๊ฐ ์์ ์ ์ง์คํ๊ณ ๋ ์์ฐ์ ์ธ ์ํฌํ๋ก์ฐ๋ฅผ ์ ์งํ ์ ์๋๋ก ํฉ๋๋ค. ์์ ๋ณ๊ฒฝ๋ง๋ค 30์ด๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ๊ณผ 2์ด๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ ์ฐจ์ด๋ฅผ ์์ํด ๋ณด์ธ์. ํ๋ฃจ ์ข ์ผ ๊ทธ ์ ์ฝ๋ ์๊ฐ์ ์๋นํฉ๋๋ค.
3. ํฅ์๋ ํซ ๋ชจ๋ ๋ฆฌํ๋ ์ด์ค๋จผํธ (HMR)
ํซ ๋ชจ๋ ๋ฆฌํ๋ ์ด์ค๋จผํธ(HMR)๋ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ์ง ์๊ณ ๋ธ๋ผ์ฐ์ ์์ ๋ชจ๋์ ์ ๋ฐ์ดํธํ ์ ์๋ ๊ธฐ๋ฅ์ ๋๋ค. ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ์์ ๋ ๋ชจ๋๋ง ์ ๋ฐ์ดํธ๋๋๋ก ๋ณด์ฅํ์ฌ HMR์ ๋ณด์ํ๋ฉฐ, ๊ฒฐ๊ณผ์ ์ผ๋ก ๋ ๋น ๋ฅด๊ณ ์ํํ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋ณ๊ฒฝ์ด ์์ ๋๋ง๋ค ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ ์์ํ ํ์๊ฐ ์์ผ๋ฏ๋ก ๊ฐ๋ฐ ์ค ์ ํ๋ฆฌ์ผ์ด์ ์ํ๋ฅผ ๋ณด์กดํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
4. ๋ฎ์ ๋ฆฌ์์ค ์๋น
๊ฐ ๋น๋์ ํ์ํ ์์ ๋์ ์ค์์ผ๋ก์จ, ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ๋ฆฌ์์ค ์๋น๋ ๋ฎ์ถฅ๋๋ค. ์ด๋ ๋ฆฌ์์ค๊ฐ ์ ํ๋ ๊ธฐ๊ธฐ์์ ์์ ํ๊ฑฐ๋ ๋น๋ ์๋ฒ๊ฐ ์ฌ๋ฌ ํ ๊ฐ์ ๊ณต์ ๋๋ ํ๊ฒฝ์์ ์์ ํ๋ ๊ฐ๋ฐ์์๊ฒ ํนํ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด๋ ๊ฑด๊ฐํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ์งํ๊ณ ๋น์ฉ์ ์ต์ ํํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ์๋ ๋ฐฉ์
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ํ๋ก์ธ์ค๋ ์ผ๋ฐ์ ์ผ๋ก ๋ค์ ๋จ๊ณ๋ฅผ ํฌํจํฉ๋๋ค:
1. ์์กด์ฑ ๊ทธ๋ํ ์์ฑ
๋น๋ ์์คํ ์ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋ถ์ํ๊ณ ๋ชจ๋ ๊ฐ์ ๊ด๊ณ๋ฅผ ๋ํ๋ด๋ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์์ฑํฉ๋๋ค. ์ด ๊ทธ๋ํ๋ ์ด๋ค ๋ชจ๋์ด ๋ค๋ฅธ ๋ชจ๋์ ์์กดํ๋์ง๋ฅผ ๋งคํํ์ฌ, ๋น๋ ์์คํ ์ด ํน์ ํ์ผ์ ๋ณ๊ฒฝ์ด ๋ฏธ์น๋ ์ํฅ์ ์ดํดํ ์ ์๊ฒ ํฉ๋๋ค. ๊ฐ ๋น๋ ๋๊ตฌ๋ ์ด ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์์ฑํ๊ธฐ ์ํด ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค.
์์: ๊ฐ๋จํ React ์ ํ๋ฆฌ์ผ์ด์ ์์ `Header.js` ์ปดํฌ๋ํธ๋ `Logo.js` ์ปดํฌ๋ํธ์ `Navigation.js` ์ปดํฌ๋ํธ์ ์์กดํ ์ ์์ต๋๋ค. ์์กด์ฑ ๊ทธ๋ํ๋ ์ด ๊ด๊ณ๋ฅผ ๋ฐ์ํ ๊ฒ์ ๋๋ค.
2. ํ์ผ ์์คํ ๊ฐ์
๋น๋ ์์คํ ์ ํ์ผ ์์คํ ๊ฐ์์(watcher)๋ฅผ ์ฌ์ฉํ์ฌ ์์ค ํ์ผ์ ๋ณ๊ฒฝ์ ๋ชจ๋ํฐ๋งํฉ๋๋ค. ํ์ผ์ด ์์ ๋๋ฉด, ๊ฐ์์๋ ์ฌ๋น๋๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. ํ๋ ์ด์ ์ฒด์ ๋ ํ์ผ ์์คํ ๋ณ๊ฒฝ์ ๊ฐ์งํ๋ ํจ์จ์ ์ธ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ๋ฉฐ, ๋น๋ ์์คํ ์ ์ด๋ฅผ ํ์ฉํ์ฌ ์ฝ๋ ์์ ์ ์ ์ํ๊ฒ ๋ฐ์ํฉ๋๋ค.
์์: ์ธ๊ธฐ ์๋ `chokidar` ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ข ์ข ํฌ๋ก์คํ๋ซํผ ํ์ผ ์์คํ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
3. ๋ณ๊ฒฝ ๊ฐ์ง ๋ฐ ์ํฅ ๋ถ์
๋ณ๊ฒฝ์ ๊ฐ์งํ๋ฉด, ๋น๋ ์์คํ ์ ์์ ๋ ํ์ผ์ ๋ถ์ํ๊ณ ์ด ๋ณ๊ฒฝ์ ์ํฅ์ ๋ฐ๋ ๋ค๋ฅธ ๋ชจ๋์ ๊ฒฐ์ ํฉ๋๋ค. ์ด๋ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์ํํ๋ฉฐ ์์ ๋ ํ์ผ์ ์ง์ ๋๋ ๊ฐ์ ์ ์ผ๋ก ์์กดํ๋ ๋ชจ๋ ๋ชจ๋์ ์๋ณํจ์ผ๋ก์จ ์ํ๋ฉ๋๋ค. ์ด ๋จ๊ณ๋ ๋ชจ๋ ํ์ํ ๋ชจ๋์ด ๋ณ๊ฒฝ ์ฌํญ์ ์ ํํ๊ฒ ๋ฐ์ํ๋๋ก ์ฌ์ปดํ์ผ๋๋๋ก ๋ณด์ฅํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
์์: ๋ง์ฝ `Logo.js`๊ฐ ์์ ๋๋ฉด, ๋น๋ ์์คํ ์ `Header.js`๊ฐ ์ด์ ์์กดํ๋ฉฐ ์ฌ์ปดํ์ผ๋์ด์ผ ํจ์ ์๋ณํ ๊ฒ์ ๋๋ค. ๋ง์ฝ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ค์ด `Header.js`์ ์์กดํ๋ค๋ฉด, ๊ทธ๋ค๋ ์ฌ์ปดํ์ผ ๋์์ผ๋ก ํ์๋ ๊ฒ์ ๋๋ค.
4. ์ ํ์ ์ฌ์ปดํ์ผ
๊ทธ ๋ค์ ๋น๋ ์์คํ ์ ๋ณ๊ฒฝ์ ์ํด ์ํฅ์ ๋ฐ๋ ๊ฒ์ผ๋ก ์๋ณ๋ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํฉ๋๋ค. ์ด๊ฒ์ด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ปดํ์ผํ ํ์๋ฅผ ์์ ๋ ๋น ๋ฅธ ๋น๋ ์๊ฐ์ ๋ฌ์ฑํ๋ ํต์ฌ์ ๋๋ค. ์ปดํ์ผ๋ ๋ชจ๋์ ๋ฒ๋ค์์ ์ ๋ฐ์ดํธ๋๊ณ , ๋ณ๊ฒฝ ์ฌํญ์ HMR์ด๋ ์ ์ฒด ํ์ด์ง ์๋ก๊ณ ์นจ์ ํตํด ๋ธ๋ผ์ฐ์ ์ ๋ฐ์๋ฉ๋๋ค.
5. ์บ์ ๊ด๋ฆฌ
๋น๋ ์๊ฐ์ ๋์ฑ ์ต์ ํํ๊ธฐ ์ํด ๋น๋ ์์คํ ์ ์ข ์ข ์บ์ฑ ๋ฉ์ปค๋์ฆ์ ์ฌ์ฉํฉ๋๋ค. ์ด์ ์ปดํ์ผ ๊ฒฐ๊ณผ๋ ์บ์์ ์ ์ฅ๋๋ฉฐ, ๋น๋ ์์คํ ์ ๋ชจ๋์ ์ฌ์ปดํ์ผํ๊ธฐ ์ ์ ์บ์๋ฅผ ํ์ธํฉ๋๋ค. ๋ง์ฝ ๋ชจ๋์ด ๋ง์ง๋ง ๋น๋ ์ดํ ๋ณ๊ฒฝ๋์ง ์์๋ค๋ฉด, ๋น๋ ์์คํ ์ ๋จ์ํ ์บ์๋ ๊ฒฐ๊ณผ๋ฅผ ๊ฒ์ํ์ฌ ์ฌ์ปดํ์ผํ ํ์๋ฅผ ์์จ ์ ์์ต๋๋ค. ํจ๊ณผ์ ์ธ ์บ์ ๊ด๋ฆฌ๋ ์ฆ๋ถ ์ปดํ์ผ์ ์ด์ ์ ๊ทน๋ํํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
์ฃผ์ ํ๋ก ํธ์๋ ๋น๋ ๋๊ตฌ์ ์ฆ๋ถ ์ปดํ์ผ ๊ธฐ๋ฅ
๋ง์ ์ธ๊ธฐ ์๋ ํ๋ก ํธ์๋ ๋น๋ ๋๊ตฌ๋ ์ฆ๋ถ ์ปดํ์ผ๊ณผ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ๋ํ ๊ฐ๋ ฅํ ์ง์์ ์ ๊ณตํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ฃผ๋ชฉํ ๋งํ ์์ ๋๋ค:
1. Webpack
Webpack์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ปค๋ฎค๋ํฐ์์ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๊ฐ๋ ฅํ๊ณ ๋ค์ฌ๋ค๋ฅํ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. watch ๋ชจ๋์ HMR ๊ธฐ๋ฅ์ ํตํด ์ฆ๋ถ ์ปดํ์ผ์ ํ๋ฅญํ๊ฒ ์ง์ํฉ๋๋ค. Webpack์ ์์กด์ฑ ๊ทธ๋ํ ๋ถ์์ ๋ณ๊ฒฝ ์ฌํญ์ ํจ์จ์ ์ผ๋ก ์ถ์ ํ๊ณ ํ์ํ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํ ์ ์๊ฒ ํฉ๋๋ค. ๊ตฌ์ฑ์ด ๋ณต์กํ ์ ์์ง๋ง, ๋๊ท๋ชจ ํ๋ก์ ํธ์์์ ์ด์ ์ ์๋นํฉ๋๋ค. Webpack์ ๋ํ ๋น๋๋ฅผ ๋์ฑ ๊ฐ์ํํ๊ธฐ ์ํด ์๊ตฌ ์บ์ฑ์ ์ง์ํฉ๋๋ค.
์นํฉ ์ค์ ์์ ์ค๋ํซ:
module.exports = {
// ... other configurations
devServer: {
hot: true, // Enable HMR
},
cache: {
type: 'filesystem', // Use filesystem caching
buildDependencies: {
config: [__filename],
},
},
};
2. Parcel
Parcel์ ์ํํ๊ณ ์ง๊ด์ ์ธ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ ์ ๋ก ๊ตฌ์ฑ(zero-configuration) ๋น๋ ๋๊ตฌ์ ๋๋ค. ์ฆ๋ถ ์ปดํ์ผ๊ณผ HMR์ ๋ด์ฅ ์ง์ํ์ฌ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ฅผ ์ฝ๊ฒ ์์ํ ์ ์๊ฒ ํด์ค๋๋ค. Parcel์ ์์ค ํ์ผ์ ๋ณ๊ฒฝ์ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ์ํฅ์ ๋ฐ๋ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํ๋ฉฐ, ์๋ ๊ตฌ์ฑ์ด ์ ํ ํ์ ์์ต๋๋ค. Parcel์ ํนํ ์ฌ์ฉ ํธ์์ฑ์ด ์ฐ์ ์๋๋ ์ค์ ๊ท๋ชจ ํ๋ก์ ํธ์ ์ ์ฉํฉ๋๋ค.
3. Rollup
Rollup์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ณ ๋๋ก ์ต์ ํ๋ ๋ฒ๋ค์ ์์ฑํ๋ ๋ฐ ์ค์ ์ ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ์ฆ๋ถ ์ปดํ์ผ๊ณผ ํธ๋ฆฌ ์์ดํน(tree shaking)์ ํ๋ฅญํ๊ฒ ์ง์ํ์ฌ, ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ณ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค. Rollup์ ํ๋ฌ๊ทธ์ธ ์์คํ ์ ํตํด ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ฌ์ฉ์ ์ ์ํ๊ณ ๋ค๋ฅธ ๋๊ตฌ์ ํตํฉํ ์ ์์ต๋๋ค.
4. ESBuild
ESBuild๋ Go๋ก ์์ฑ๋ ๋งค์ฐ ๋น ๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค๋ฌ ๋ฐ ์ถ์๊ธฐ(minifier)์ ๋๋ค. Webpack, Parcel, Rollup์ ๋นํด ํนํ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ํจ์ฌ ๋น ๋ฅธ ๋น๋ ์๊ฐ์ ์๋ํฉ๋๋ค. ๋ํ ์ฆ๋ถ ์ปดํ์ผ๊ณผ HMR์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ์ฌ ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋งค๋ ฅ์ ์ธ ์ต์ ์ ๋๋ค. ํ๋ฌ๊ทธ์ธ ์ํ๊ณ๋ ์์ง ๋ฐ์ ์ค์ด์ง๋ง, ๋น ๋ฅด๊ฒ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์ต๋๋ค.
5. Vite
Vite(ํ๋์ค์ด๋ก "๋น ๋ฅด๋ค"๋ ๋ป, /vit/๋ก ๋ฐ์)๋ ํนํ Vue.js๋ React์ ๊ฐ์ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ฅผ ์ํ ๋น ๋ฅด๊ณ ์ต์ ํ๋ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ ๋น๋ ๋๊ตฌ์ ๋๋ค. ๊ฐ๋ฐ ์ค์๋ ๋ค์ดํฐ๋ธ ES ๋ชจ๋์ ํ์ฉํ๊ณ ํ๋ก๋์ ์ ์ํด Rollup์ผ๋ก ์ฝ๋๋ฅผ ๋ฒ๋ค๋งํฉ๋๋ค. Vite๋ ๋ธ๋ผ์ฐ์ ๋ค์ดํฐ๋ธ ES ๋ชจ๋ ์ํฌํธ์ esbuild์ ์กฐํฉ์ ์ฌ์ฉํ์ฌ ๋งค์ฐ ๋น ๋ฅธ ์ฝ๋ ์คํํธ ์๊ฐ๊ณผ HMR ์ ๋ฐ์ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์๋ก์ด ํ๋ก์ ํธ์์ ๋งค์ฐ ์ธ๊ธฐ ์๋ ์ ํ์ด ๋์์ต๋๋ค.
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋ ์ต์ ํ๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ์ด์ ์ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ธ์:
1. ์์กด์ฑ ์ต์ํ
์ฝ๋๋ฒ ์ด์ค์ ์์กด์ฑ ์๋ฅผ ์ค์ด๋ฉด ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ๋จ์ํํ๊ณ ๊ฐ ๋น๋์ ํ์ํ ์์ ๋์ ์ค์ผ ์ ์์ต๋๋ค. ๋ถํ์ํ ์์กด์ฑ์ ํผํ๊ณ ๊ฐ๋ฅํ๋ฉด ๊ฒฝ๋ ๋์์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. `package.json` ํ์ผ์ ๊นจ๋ํ๊ณ ์ต์ ์ํ๋ก ์ ์งํ๊ณ , ์ฌ์ฉํ์ง ์๊ฑฐ๋ ์ค๋๋ ํจํค์ง๋ฅผ ์ ๊ฑฐํ์ธ์.
2. ์ฝ๋ ๋ชจ๋ํ
์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋ ์๊ณ ๋ชจ๋ํ๋ ์ปดํฌ๋ํธ๋ก ๋๋๋ฉด ๋น๋ ์์คํ ์ด ๋ณ๊ฒฝ ์ฌํญ์ ์ถ์ ํ๊ณ ํ์ํ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค. ๋ช ํํ ๊ด์ฌ์ฌ ๋ถ๋ฆฌ๋ฅผ ๋ชฉํ๋ก ํ๊ณ , ๊ฐํ๊ฒ ๊ฒฐํฉ๋ ๋ชจ๋์ ๋ง๋ค์ง ๋ง์ธ์. ์ ์ ์๋ ๋ชจ๋์ ์ฝ๋ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค๊ณ ์ฆ๋ถ ์ปดํ์ผ์ ์ฉ์ดํ๊ฒ ํฉ๋๋ค.
3. ๋น๋ ๊ตฌ์ฑ ์ต์ ํ
์๊ฐ์ ๋ค์ฌ ๋น๋ ์์คํ ์ ์ ์คํ๊ฒ ๊ตฌ์ฑํ์ฌ ์ฑ๋ฅ์ ์ต์ ํํ์ธ์. ๋น๋ ํ๋ก์ธ์ค๋ฅผ ๋ฏธ์ธ ์กฐ์ ํ๊ณ ๋น๋ ์๊ฐ์ ์ต์ํํ๊ธฐ ์ํด ์ฌ์ฉํ ์ ์๋ ๋ค์ํ ์ต์ ๊ณผ ํ๋ฌ๊ทธ์ธ์ ํ์ํ์ธ์. ์๋ฅผ ๋ค์ด, ์ฝ๋ ์คํ๋ฆฌํ ์ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ์์ ์ฒญํฌ๋ก ๋๋์ด ํ์ํ ๋ ๋ก๋ํ ์ ์๋๋ก ํ๋ฉด, ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ด๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
4. ์บ์ฑ ํ์ฉ
๋น๋ ์์คํ ์์ ์บ์ฑ์ ํ์ฑํํ์ฌ ์ด์ ์ปดํ์ผ ๊ฒฐ๊ณผ๋ฅผ ์ ์ฅํ๊ณ ๋ถํ์ํ ์ฌ์ปดํ์ผ์ ํผํ์ธ์. ์์กด์ฑ์ด ์ ๋ฐ์ดํธ๋๊ฑฐ๋ ๋น๋ ๊ตฌ์ฑ ์์ฒด๊ฐ ๋ณ๊ฒฝ๋๋ ๋ฑ ํ์ํ ๊ฒฝ์ฐ ์บ์๊ฐ ๋ฌดํจํ๋๋๋ก ์บ์ ๊ตฌ์ฑ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ ๋์๋์ง ํ์ธํ์ธ์. ํ์ผ ์์คํ ์บ์ฑ์ด๋ ๋ฉ๋ชจ๋ฆฌ ์บ์ฑ๊ณผ ๊ฐ์ ๋ค์ํ ์บ์ฑ ์ ๋ต์ ํ์ํ์ฌ ํน์ ํ๋ก์ ํธ์ ๊ฐ์ฅ ์ ํฉํ ์ต์ ์ ์ฐพ์ผ์ธ์.
5. ๋น๋ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง
์ ๊ธฐ์ ์ผ๋ก ๋น๋ ์์คํ ์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ์ฌ ๋ณ๋ชฉ ํ์์ด๋ ๊ฐ์ ์ด ํ์ํ ์์ญ์ ์๋ณํ์ธ์. ๋น๋ ๋ถ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์๊ฐํํ๊ณ ์ปดํ์ผํ๋ ๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ๋ชจ๋์ ์๋ณํ์ธ์. ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ๋น๋ ์๊ฐ์ ์ถ์ ํ์ฌ ์ฑ๋ฅ ์ ํ๋ฅผ ๊ฐ์งํ๊ณ ์ ์ํ๊ฒ ํด๊ฒฐํ์ธ์. ๋ง์ ๋น๋ ๋๊ตฌ์๋ ๋น๋ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ์๊ฐํํ๋ ํ๋ฌ๊ทธ์ธ์ด๋ ๋ด์ฅ ๋ฉ์ปค๋์ฆ์ด ์์ต๋๋ค.
๊ณผ์ ๋ฐ ๊ณ ๋ ค์ฌํญ
๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ๋ช ์ฌํด์ผ ํ ๋ช ๊ฐ์ง ๊ณผ์ ์ ๊ณ ๋ ค์ฌํญ๋ ์์ต๋๋ค:
1. ๊ตฌ์ฑ์ ๋ณต์ก์ฑ
์ฆ๋ถ ์ปดํ์ผ์ ์ํด ๋น๋ ์์คํ ์ ๊ตฌ์ฑํ๋ ๊ฒ์ ๋๋๋ก ๋ณต์กํ ์ ์์ผ๋ฉฐ, ํนํ ํฌ๊ณ ๋ณต์กํ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. ์ต์ ์ ์ฑ๋ฅ์ ๋ฌ์ฑํ๊ธฐ ์ํด์๋ ๋น๋ ์์คํ ์ ๋ณต์ก์ฑ๊ณผ ์์กด์ฑ ๊ทธ๋ํ ๋ถ์ ๊ธฐ๋ฅ์ ๋ํ ์ดํด๊ฐ ์ค์ํฉ๋๋ค. ๊ตฌ์ฑ ์ต์ ์ ๋ฐฐ์ฐ๊ณ ๋ค์ํ ์ค์ ์ ์คํํ๋ ๋ฐ ์๊ฐ์ ํฌ์ํ ์ค๋น๋ฅผ ํ์ธ์.
2. ์บ์ ๋ฌดํจํ
์ ์ ํ ์บ์ ๋ฌดํจํ๋ ๋น๋ ์์คํ ์ด ์ฝ๋๋ฒ ์ด์ค์ ๋ณ๊ฒฝ ์ฌํญ์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฐ์ํ๋๋ก ๋ณด์ฅํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์บ์๊ฐ ์ ๋๋ก ๋ฌดํจํ๋์ง ์์ผ๋ฉด ๋น๋ ์์คํ ์ด ์ค๋๋ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฉํ์ฌ ๋ถ์ ํํ๊ฑฐ๋ ์๊ธฐ์น ์์ ๋์์ ์ ๋ฐํ ์ ์์ต๋๋ค. ์บ์ ๊ตฌ์ฑ์ ์ธ์ฌํ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๊ณ ํ์ํ ๊ฒฝ์ฐ ์บ์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ฌดํจํ๋๋๋ก ์ค์ ๋์๋์ง ํ์ธํ์ธ์.
3. ์ด๊ธฐ ๋น๋ ์๊ฐ
์ฆ๋ถ ๋น๋๋ ํจ์ฌ ๋น ๋ฅด์ง๋ง, ์ด๊ธฐ ๋น๋ ์๊ฐ์ ํนํ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ฌ์ ํ ์๋์ ์ผ๋ก ๊ธธ ์ ์์ต๋๋ค. ์ด๋ ๋น๋ ์์คํ ์ด ์ฆ๋ถ ๋น๋๋ฅผ ์์ํ๊ธฐ ์ ์ ์ ์ฒด ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋ถ์ํ๊ณ ์์กด์ฑ ๊ทธ๋ํ๋ฅผ ์์ฑํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ฝ๋ ์คํ๋ฆฌํ ๋ฐ ํธ๋ฆฌ ์์ดํน๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
4. ๋น๋ ์์คํ ํธํ์ฑ
๋ชจ๋ ๋น๋ ์์คํ ์ด ๋์ผํ ์์ค์ ์ฆ๋ถ ์ปดํ์ผ ์ง์์ ์ ๊ณตํ๋ ๊ฒ์ ์๋๋๋ค. ์ผ๋ถ ๋น๋ ์์คํ ์ ์์กด์ฑ ๊ทธ๋ํ ๋ถ์ ๊ธฐ๋ฅ์ ์ ํ์ด ์๊ฑฐ๋ HMR์ ์ง์ํ์ง ์์ ์ ์์ต๋๋ค. ํน์ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ์ ํฉํ๊ณ ์ฆ๋ถ ์ปดํ์ผ์ ๊ฐ๋ ฅํ๊ฒ ์ง์ํ๋ ๋น๋ ์์คํ ์ ์ ํํ์ธ์.
์ค์ ์ ์ฉ ์ฌ๋ก
๋ค์์ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๊ฐ ๋ค์ํ ์ ํ์ ํ๋ก ํธ์๋ ํ๋ก์ ํธ์ ์ด๋ป๊ฒ ๋์์ด ๋ ์ ์๋์ง์ ๋ํ ๋ช ๊ฐ์ง ์์ ๋๋ค:
1. ๋๊ท๋ชจ ์ด์ปค๋จธ์ค ์น์ฌ์ดํธ
์๋ฐฑ ๊ฐ์ ์ปดํฌ๋ํธ์ ๋ชจ๋์ ๊ฐ์ง ๋๊ท๋ชจ ์ด์ปค๋จธ์ค ์น์ฌ์ดํธ๋ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ฅผ ํตํด ์๋นํ ๋น๋ ์๊ฐ ๋จ์ถ์ ๊ฒฝํํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋จ์ผ ์ ํ ์์ธ ์ปดํฌ๋ํธ๋ฅผ ์์ ํ๋ฉด ์ ์ฒด ์น์ฌ์ดํธ๊ฐ ์๋ ํด๋น ์ปดํฌ๋ํธ์ ๊ทธ ์์กด์ฑ๋ง ์ฌ๋น๋๋์ด์ผ ํฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ์์ ์๋นํ ์๊ฐ์ ์ ์ฝํ๊ณ ์์ฐ์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
2. ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์
๋ฐฉ๋ํ ์ฝ๋๋ฒ ์ด์ค์ ๋ง์ ์๋ํํฐ ์์กด์ฑ์ ๊ฐ์ง ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ฅผ ํตํด ํฐ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋จ์ผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กดํ๋ ๋ชจ๋๋ง ์ฌ๋น๋๋์ด์ผ ํฉ๋๋ค. ์ด๋ ๋น๋ ์๊ฐ์ ํฌ๊ฒ ์ค์ด๊ณ ์์กด์ฑ ๊ด๋ฆฌ๋ฅผ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
3. ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)
๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)์ ์ข ์ข ํฐ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค์ ๊ฐ์ง๊ณ ์์ด ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ์ด์์ ์ธ ๋์์ ๋๋ค. ๋ณ๊ฒฝ๋ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๋น๋ ์๊ฐ์ ํฌ๊ฒ ์ค์ด๊ณ ๊ฐ๋ฐ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. HMR์ ์ฌ์ฉํ์ฌ ์ ์ฒด ํ์ด์ง ์๋ก๊ณ ์นจ ์์ด ๋ธ๋ผ์ฐ์ ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ดํธํ ์ ์์ผ๋ฉฐ, ์ ํ๋ฆฌ์ผ์ด์ ์ํ๋ฅผ ๋ณด์กดํ๊ณ ์ํํ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
๊ฒฐ๋ก
์ฆ๋ถ ์ปดํ์ผ, ํนํ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋๋ ํ๋ก ํธ์๋ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ๊ณ ๊ฐ๋ฐ์ ์์ฐ์ฑ์ ํฅ์์ํค๋ ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋๋ค. ํ์ํ ๋ชจ๋๋ง ์ฌ์ปดํ์ผํจ์ผ๋ก์จ ๋น๋ ์๊ฐ์ ๊ทน์ ์ผ๋ก ๋จ์ถ์ํค๊ณ , HMR ๊ธฐ๋ฅ์ ํฅ์์ํค๋ฉฐ, ๋ฆฌ์์ค ์๋น๋ฅผ ์ค์ผ ์ ์์ต๋๋ค. ๊ณ ๋ คํด์ผ ํ ๊ณผ์ ๋ค์ด ์์ง๋ง, ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ์ด์ ์ ๋น์ฉ์ ํจ์ฌ ๋ฅ๊ฐํ๋ฏ๋ก ํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ์ด ๊ธ์์ ์ค๋ช ํ ๋ณ๊ฒฝ ๊ธฐ๋ฐ ๋น๋์ ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ ์ฉํจ์ผ๋ก์จ, ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ํฌ๊ฒ ๊ฐ์ ํ๊ณ ์ํํธ์จ์ด๋ฅผ ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ผ๋ก ์ ๊ณตํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ์ฑํํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ธ์.